<!-- 
 * @Description: 文件上传表单页面
 * @Author: huguodong 
 * @Date: 2023-12-15 15:43:59
!-->
<template>
  <form-container v-model="visible" :title="`${fileProps.opt}文件`" form-size="700px">
    <el-form
      ref="fileFormRef"
      :rules="rules"
      :disabled="fileProps.disabled"
      :model="fileProps.record"
      :hide-required-asterisk="fileProps.disabled"
      label-width="auto"
      label-suffix=" :"
    >
      <s-form-item label="文件" prop="file">
        <el-upload v-model:file-list="fileList" :limit="1" :auto-upload="false" :on-change="handleFileChange" :on-remove="handleFileRemove">
          <el-button type="primary">选择文件</el-button>
        </el-upload>
      </s-form-item>

      <s-form-item v-if="fileProps.record.name" label="文件名称">
        <s-input v-model="fileProps.record.name" disabled></s-input>
      </s-form-item>

      <s-form-item v-if="fileProps.record.sizeInfo" label="文件大小">
        <s-input v-model="fileProps.record.sizeInfo" disabled></s-input>
      </s-form-item>

      <!-- <s-form-item v-if="fileProps.record.Suffix" label="文件类型">
        <s-input v-model="fileProps.record.Suffix" disabled></s-input>
      </s-form-item> -->
    </el-form>
    <template #footer>
      <el-button @click="onClose"> 取消 </el-button>
      <el-button v-show="!fileProps.disabled" type="primary" @click="handleSubmit"> 确定 </el-button>
    </template>
  </form-container>
</template>

<script setup lang="ts">
import { fileAPI, SysFile } from "@/api";
import { FormOptEnum } from "@/enums";
import { FormInstance } from "element-plus";
import { ref, reactive } from "vue";

const visible = ref(false); //是否显示表单
const fileList = ref([]); // 上传文件列表

// 表单参数
const fileProps = reactive<FormProps.Base<SysFile.SysFileInfo>>({
  opt: FormOptEnum.ADD,
  record: {},
  disabled: false
});

// 表单验证规则
const rules = reactive({
  file: [
    {
      validator: () => fileList.value.length > 0,
      message: "请选择文件"
    }
  ]
});

/**
 * 打开表单
 * @param props 表单参数
 */
function onOpen(props: FormProps.Base<SysFile.SysFileInfo>) {
  Object.assign(fileProps, props); //合并参数
  visible.value = true; //显示表单
}

// 提交数据（新增/编辑）
const fileFormRef = ref<FormInstance>();
/** 提交表单 */
async function handleSubmit() {
  fileFormRef.value?.validate(async valid => {
    if (!valid) return; //表单验证失败

    // TODO: 调用文件上传API
    const formData = new FormData();
    for (const key in fileProps.record) {
      formData.append(key, fileProps.record[key]);
    }
    // const file = fileList.value[0];
    await fileAPI
      .uploadLocal(formData)
      .then(() => {
        fileProps.successful!(); //调用父组件的successful方法
      })
      .finally(() => {
        onClose();
      });
  });
}

/** 关闭表单*/
function onClose() {
  fileList.value = [];
  fileProps.record = {};
  visible.value = false;
}

/** 文件选择变化 */
function handleFileChange(file: any) {
  fileProps.record.name = file.name;
  fileProps.record.sizeInfo = (file.size / 1024).toFixed(2) + " KB";
  fileProps.record.suffix = file.name.split(".").pop();
  fileProps.record.file = file.raw;
}

/** 移除文件 */
function handleFileRemove() {
  fileProps.record = {};
}

// 暴露给父组件的方法
defineExpose({
  onOpen
});
</script>
